<template>
  <div class="oneClass">
    <van-nav-bar
      title="成绩数据"
      left-text="返回"
      left-arrow
      @click-left="goBack"
    ></van-nav-bar>
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item title="离散数学" name="1">
        <div class="charts">
          <ve-line :data="chartData" :settings="chartSettings"></ve-line>
        </div>
        <div class="score">您的平均成绩：{{avg}}</div>
      </el-collapse-item>
      <el-collapse-item title="反馈 Feedback" name="2">
        <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
        <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
  export default {
    name: "score-msg",
    data() {
      return {
        chartData: {
          rows: [],
          columns: ['PagesId', 'score']
        },
        chartSettings: {
          dimension: 'PagesId',
          metrics: 'score'
        },
        activeNames: ['1'],
        avg: 0
      };
    },
    methods: {
      handleChange(val) {
        console.log(val);
      },
      goBack(){
        this.$router.push({path: '/personMsg'})
      }
    },
    created: function () {
      this.$http.get('page/listScore', {
        params: {
          'studentId': JSON.parse(window.localStorage.getItem('user')).id
        }
      })
        .then(res => {
          console.log("id is "+JSON.parse(window.localStorage.getItem('user')).studentId)
          for (let i = 0; i < res.data.data.length; i++) {
            this.chartData.rows.push({'PagesId': res.data.data[i].pagesId, 'score': res.data.data[i].score})
            this.avg += res.data.data[i].score
          }
          this.avg /= res.data.data.length;
          this.avg=this.avg.toFixed(2);
          this.chartSettings = {
            labelMap: {
              balance: '成绩'
            }
          };

          console.log(res)
        }).catch(err => {
        console.log(err)
      })
    }
  }
</script>

<style scoped>
  .score {
    margin-left: 5%;
  }

</style>
